<template>

  <div class="home-container">
    <van-nav-bar
  title="今日头条"
  fixed
  class="header"
/>
    <van-pull-refresh  v-model="isloading" @refresh="onRefresh" :disabled="finished">
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>

<articlesInfo v-for="item in articlesList" class="ariItem"

:key="item.art_id"
:id="item.art_id"
:title ="item.title"
:pubdate ="item.pubdate"
:comment="item.comm_count"
:author="item.aut_name"
:cover="item.cover"
@remove_art="removeArt"
@click.native="$router.push('/article/' + item.art_id,{params:{art_id:item.art_id}})"
>
</articlesInfo>

</van-list>
</van-pull-refresh>

  </div>

</template>

<script>
// @ is an alias to /src
import { getArticlesList } from '../API//articlesAPI.js'
import articlesInfo from '../components/articlesInfo.vue'
// import { getDetailArt } from '../API/detailArtuclesAPI'
export default {
  name: 'Home',
  data () {
    return {
      // 页数
      page: 0,
      // 条数
      time: Date.now(),
      // 判断是否加载完数据
      finished: false,
      // 判断是否在加载中，如果为true，表明正在加载中，如果为false，说明加载完毕
      loading: true,
      // 是否正在进行下拉刷新的请求
      isloading: false,
      // 判断是否下拉刷新
      refreshing: false,
      articlesList: [],
      // 用户的频道列表数组
      userChannel: []
    }
  },
  methods: {
    async initArticlesList (isRefreshing) {
      // console.log(this.time)
      // console.log(this.page)
      const { data: res } = await getArticlesList(this.page, this.time)
      // console.log(res.data.results)
      if (res.message === 'OK') {
        this.time = res.data.pre_timestamp
        // 将新数据添加到之前获取的数组中
        // console.log(res)
        if (isRefreshing) {
          this.articlesList = [...res.data.results, ...this.articlesList]
          this.isloading = false
        } else {
          this.articlesList = [...this.articlesList, ...res.data.results]
          this.loading = false
        }
        if (res.data.results.length === 0) {
          this.finished = true
        }
      }
      // 获取的新数组长度为0时，将不再请求数据
    },
    onLoad () {
      console.log('加载成功')
      this.initArticlesList()
    },
    onRefresh () {
      console.log('下拉刷新成功')
      this.initArticlesList(true)
    },
    removeArt (id) {
      this.articlesList = this.articlesList.filter(item => item.art_id !== id)
      // 2. 判断剩余数据的文章数量是否小于 10
      if (this.articlesList.length < 10) {
      // 主动请求下一页的数据
        this.initArticlesList()
      }
    }

  },
  created () {
    this.initArticlesList()
  },
  components: {
    articlesInfo
    // ArticleDetail
  },
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
  beforeRouteLeave (to, from, next) {
    from.meta.top = window.scrollY
    next()
  }

}
</script>
<style lang="less" scoped>
*{
  margin:0;
  padding:0;
}

.home-container{
  padding:55.0px 0 59.9992px 0 ;
}
</style>
